<script setup>
/**
 * Tabbar 组件
 * 移动端底部导航栏，基于 Vant4 van-tabbar 封装，自动路由切换，适配底部安全区。
 *
 * @feature 自动高亮当前路由
 * @feature 适配 iOS/安卓底部安全区
 * @feature 默认包含：首页、功能、文档、我的 四个 tab
 * @feature 支持 van-tabbar 的所有原生属性
 *
 * @example
 * <Tabbar />
 *
 * 如需自定义 tab 项，请修改组件源码。
 */

import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const active = ref(route.path)

watch(
  () => route.path,
  val => {
    active.value = val
  }
)
</script>

<template>
  <div class="pb-safe">
    <van-tabbar v-model="active" route>
      <van-tabbar-item to="/home" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item to="/docs" icon="info-o">文档</van-tabbar-item>
      <van-tabbar-item to="/mine" icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
